<template>
	<view class="content">

		<!-- 底部操作栏 -->
		<view class="bottom-view shadow fadeIn-1s">
			<uni-row>
				<uni-col :span="6">
					<view class="bottom-block" @tap="onModeTap('1')"
						:class="(mode == '0' || mode == '1') ? 'block-selected' : ''"
						style="border-radius: 99px 0px 0px 99px;">
						粉丝
					</view>
				</uni-col>
				<uni-col :span="6">
					<view class="bottom-block" @tap="onModeTap('2')" :class="mode == '2' ? 'block-selected' : ''">
						关注
					</view>
				</uni-col>
				<uni-col :span="6">
					<view class="bottom-block" @tap="onModeTap('3')" :class="mode == '3' ? 'block-selected' : ''">
						喜欢
					</view>
				</uni-col>
				<uni-col :span="6">
					<view class="bottom-block" @tap="onModeTap('4')" :class="mode == '4' ? 'block-selected' : ''"
						style="border-radius: 0px 99px 99px 0px;">
						收藏
					</view>
				</uni-col>
			</uni-row>
		</view>

		<!-- 我的粉丝 -->
		<view class="fans-content" v-if="mode=='0' || mode=='1'">
			<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" v-if="myFans.length == 0"
				text="心里空空的">
			</u-empty>
			<view class="user-view shadow-light fadeIn-d3s" v-for="(user, i) in myFans" :key="i">
				<view class="user-info-view" @tap="onUserTap(user.email)">
					<image class="user-avatar" 
					:src="(user.avatar == undefined || user.avatar == '') ? '/static/images/hei.png' : user.avatar"></image>
					<text class="user-username">{{ user.username }}</text>
				</view>
				<view class="user-button iconfont" @tap="onUserBtnTap(isFollow(user.userId), user)"
					:class="isFollow(user.userId) ? 'bcerror' : 'bcprimary'">
					{{ isFollow(user.userId) ? "&#xe75e;" : "&#xe8a1;"}}
				</view>
			</view>
		</view>
		
		<!-- 我关注人的 -->
		<view class="follows-content" v-if="mode=='2'">
			<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" v-if="myFollows.length == 0"
				text="快去遇见那个 TA 吧">
			</u-empty>

			<view class="user-view shadow-light fadeIn-d3s" v-for="(user, i) in myFollows" :key="i">
				<view class="user-info-view" @tap="onUserTap(user.email)">
					<image class="user-avatar" :src="(user.avatar == undefined || user.avatar == '') ? '/static/images/hei.png' : user.avatar"></image>
					<text class="user-username">{{ user.username }}</text>
				</view>
				<view class="user-button iconfont bcerror" @tap="onUserBtnTap(true, user)">
					&#xe75e;
				</view>
			</view>
		</view>
		
		<!-- 喜欢的嘿文 -->
		<view class="likes-content" v-if="mode=='3'">
			<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" v-if="myLikes.length == 0"
				text="发现你感兴趣的嘿文">
			</u-empty>

			<view class="hei-view shadow-light fadeIn-d3s" v-for="(hei, i) in myLikes" :key="i">
				<view class="hei-user-view" @tap="onUserTap(hei.email)">
					<image class="hei-avatar" :src="hei.avatar" mode="aspectFill"></image>
					<text class="hei-username">{{ hei.username }}</text>
				</view>
				<view class="hei-content-view" @tap="onHeiTap(hei.heiId)">
					<image class="hei-image" :src="hei.images[0].src" mode="aspectFill"></image>
					<view class="hei-info">
						<view class="hei-title">{{ hei.title }}</view>
						<view class="hei-content">{{ hei.content }}</view>
					</view>
				</view>
				<view class="hei-button-view">
					<text class="hei-likes">喜欢：{{ hei.likes }}</text>
					<text class="hei-collects">收藏：{{ hei.collections }}</text>
					<text class="hei-collects">浏览：{{ hei.views }}</text>
					<view class="hei-button-group">
						<view class="hei-button-like iconfont like" 
							@tap="onHeiLikeTap(hei, i)">
							&#xe8a8;
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 收藏的嘿文 -->
		<view class="collects-content" v-if="mode=='4'">
			<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" v-if="myCollects.length == 0"
				text="快去找找有意思的嘿文吧">
			</u-empty>
			
			
			<view class="hei-view shadow-light fadeIn-d3s" v-for="(hei, i) in myCollects" :key="i">
				<view class="hei-user-view" @tap="onUserTap(hei.email)">
					<image class="hei-avatar" :src="hei.avatar" mode="aspectFill"></image>
					<text class="hei-username">{{ hei.username }}</text>
				</view>
				<view class="hei-content-view" @tap="onHeiTap(hei.heiId)">
					<image class="hei-image" :src="hei.images[0].src" mode="aspectFill"></image>
					<view class="hei-info">
						<view class="hei-title">{{ hei.title }}</view>
						<view class="hei-content">{{ hei.content }}</view>
					</view>
				</view>
				<view class="hei-button-view">
					<text class="hei-likes">喜欢：{{ hei.likes }}</text>
					<text class="hei-collects">收藏：{{ hei.collections }}</text>
					<text class="hei-collects">浏览：{{ hei.views }}</text>
					<view class="hei-button-group">
						<view class="hei-button-collect iconfont collect"
							@tap="onHeiCollectTap(hei, i)">
							&#xe882;
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getCollectHei,
		getLikeHei,
		deleteHeiLike,
		deleteHeiCollect
	} from "@/network/HeiApi.js";

	import {
		getFollow,
		getFan,
		addFollow,
		deleteFollow
	} from "@/network/UserApi.js";
	export default {
		data() {
			return {
				// 当前是什么模式，0/1：粉丝，2：关注，3：喜欢，4：收藏
				mode: "0",

				// 标记当前是否在加载中，防止用户频繁点击切换模式
				loading: false,

				myFans: [],
				myFollows: [],
				myLikes: [],
				myCollects: [],
			}
		},

		onLoad(options) {
			this.mode = options.mode == undefined ? "0" : options.mode;
			// 动态修改导航栏标题
			this.updateBarTitle();
		},

		onShow() {
			this.refreshData();
		},

		methods: {
			/**
			 * 刷新数据
			 */
			refreshData: function(mode = "") {
				if (mode == "") {
					this.refreshFans();
					this.refreshFollows();
					this.refreshLikes();
					this.refreshCollects();
				} else {
					switch (mode) {
						case "0":
						case "1":
							this.refreshFans();
							break;
						case "2":
							this.refreshFollows();
							break;
						case "3":
							this.refreshLikes();
							break;
						case "4":
							this.refreshCollects();
							break;
					}
				}

			},

			/**
			 * 获取我的粉丝
			 */
			refreshFans: function() {
				this.loading = true;
				getFan().then(data => {
					this.myFans = data.content;
					this.loading = false;
				}).catch(err => {
					this.loading = false;
					uni.showModal({
						title: "获取我的粉丝失败",
						content: err
					});
				});
			},

			/**
			 * 获取我的关注
			 */
			refreshFollows: function() {
				this.loading = true;
				getFollow().then(data => {
					this.myFollows = data.content;
					this.loading = false;
				}).catch(err => {
					this.loading = false;
					uni.showModal({
						title: "获取我的关注失败",
						content: err
					});
				});
			},

			/**
			 * 获取我喜欢的嘿文
			 */
			refreshLikes: function() {
				this.loading = true;
				getLikeHei().then(data => {
					this.myLikes = data.content;
					this.loading = false;
				}).catch(err => {
					this.loading = false;
					uni.showModal({
						title: "获取喜欢的嘿文失败",
						content: err
					});
				});
			},

			/**
			 * 获取我收藏的嘿文
			 */
			refreshCollects: function() {
				this.loading = true;
				getCollectHei().then(data => {
					this.myCollects = data.content;
					this.loading = false;
				}).catch(err => {
					this.loading = false;
					uni.showModal({
						title: "获取收藏的嘿文失败",
						content: err
					});
				});
			},

			/**
			 * 吸顶操作栏模式点击事件
			 * @param {Object} i 新切换的模式代码
			 */
			onModeTap: function(i) {
				if (this.loading) {
					// 如果当前正在加载，就不切换模式
					this.toast("请勿频繁点击");
					return;
				}

				// 未改变模式，直接返回
				if (this.mode == i) {
					return;
				}

				this.mode = i;
				// 动态修改导航栏标题
				this.updateBarTitle();
				this.refreshData(i);
			},

			/**
			 * 根据 mode 数据修改导航栏标题
			 */
			updateBarTitle: function() {
				let title = "";
				switch (this.mode) {
					case "0":
					case "1":
						title = "我的粉丝";
						break;
					case "2":
						title = "我的关注";
						break;
					case "3":
						title = "我的喜欢";
						break;
					case "4":
						title = "我的收藏";
						break;
				}

				uni.setNavigationBarTitle({
					title: title
				});
			},

			/**
			 * 根据用户 ID 判断当前用户是否已经关注
			 * @param {Object} userId
			 */
			isFollow: function(userId) {
				for (let i = 0; i < this.myFollows.length; i++) {
					if (this.myFollows[i].userId == userId) {
						return true;
					}
				}
				return false;
			},

			/**
			 * 我的粉丝/关注右侧按钮点击事件
			 * @param {Object} isFollow 是否已经关注
			 * @param {Object} user 用户数组
			 */
			onUserBtnTap: function(isFollow, user) {
				let that = this;
				if (this.loading) {
					this.toast("上一个请求未完成");
					return;
				}
				if (isFollow) {
					// 已经关注，再次点击取消关注
					uni.showModal({
						title: "温馨提示",
						content: "确定取消对 \"" + user.username + "\" 的关注吗",
						success: function(res) {
							if (res.confirm != undefined && res.confirm) {
								// 取消关注
								that.loading = true;
								deleteFollow(user.email).then(data => {
									// 取消关注成功，刷新我的粉丝和关注的用户
									that.refreshFans();
									that.refreshFollows();
									that.loading = false;
								}).catch(err => {
									uni.showModal({
										title: "取消关注失败",
										content: err
									});
									that.loading = false;
								})
							}
						}
					});
				} else {
					// 没有关注，点击是回关
					this.loading = true;
					addFollow(user.email).then(data => {
						that.toast("回关成功");
						that.refreshFans();
						that.refreshFollows();
						that.loading = false;
					}).catch(err => {
						uni.showModal({
							title: "回关失败",
							content: err
						});
						that.loading = false;
					});
				}
			},

			/**
			 * 用户信息点击事件，跳转用户详情页
			 * @param {Object} email
			 */
			onUserTap: function(email) {
				uni.navigateTo({
					url: "/pages/user/user?email=" + email
				});
			},

			/**
			 * 嘿文喜欢点击事件
			 * @param {Object} hei 嘿文
			 * @param {Object} i
			 */
			onHeiLikeTap: function(hei, i) {
				let that = this;
				if (this.loading) {
					this.toast("上一个请求未完成");
					return;
				}
				uni.showModal({
					title: "温馨提示",
					content: "确定取消对嘿文 \"" + hei.title + "\" 的喜欢吗",
					success: function(res) {
						if (res.confirm != undefined && res.confirm) {
							// 取消喜欢
							that.loading = true;
							deleteHeiLike(hei.heiId).then(data => {
								// 取消喜欢成功，刷新我喜欢的嘿文
								that.refreshLikes();
								that.loading = false;
							}).catch(err => {
								uni.showModal({
									title: "取消喜欢失败",
									content: err
								});
								that.loading = false;
							})
						}
					}
				});
			},
			
			/**
			 * 嘿文收藏点击事件
			 * @param {Object} hei 嘿文
			 * @param {Object} i
			 */
			onHeiCollectTap: function(hei,i ) {
				let that = this;
				if (this.loading) {
					this.toast("上一个请求未完成");
					return;
				}
				uni.showModal({
					title: "温馨提示",
					content: "确定取消对嘿文 \"" + hei.title + "\" 的收藏吗",
					success: function(res) {
						if (res.confirm != undefined && res.confirm) {
							// 取消收藏
							that.loading = true;
							deleteHeiCollect(hei.heiId).then(data => {
								// 取消收藏成功，刷新我收藏的嘿文
								that.refreshCollects();
								that.loading = false;
							}).catch(err => {
								uni.showModal({
									title: "取消收藏失败",
									content: err
								});
								that.loading = false;
							})
						}
					}
				});
			},
			
			/**
			 * 嘿文点击事件，跳转嘿文页面
			 * @param {Object} heiId
			 */
			onHeiTap: function(heiId) {
				uni.navigateTo({
					url: "/pages/hei/hei?heiId=" + heiId
				});
			},
		}
	}
</script>

<style lang="scss">
	.content {
		padding: 20rpx;
		position: relative;
	}

	.bottom-view {
		background-color: white;
		border-radius: 99px;
		height: 80rpx;
		line-height: 80rpx;
		position: fixed;
		width: 92%;
		bottom: 40rpx;
		left: 30rpx;
		z-index: 99;

		// background: rgba(255, 255, 255, .7);
		// -webkit-backdrop-filter: blur(28px);
		// backdrop-filter: blur(28px);
	}

	.bottom-block {
		text-align: center;
		overflow: hidden;
		color: var(--secColor);
		transition: ease-out all .2s;
	}

	.block-selected {
		background-color: $u-primary;
		color: white;
	}

	.user-view {
		background-color: white;
		margin-bottom: 20rpx;
		border-radius: 99px;
		padding: 20rpx;
		height: 70rpx;
		line-height: 70rpx;
		position: relative;
		transition: ease-out background-color .2s;
	}

	.user-view:active {
		background-color: $u-info-light;
	}

	.user-info-view {
		height: 70rpx;
		width: 88%;
	}

	.user-avatar {
		width: 70rpx;
		height: 70rpx;
		border-radius: 99px;
	}

	.user-username {
		vertical-align: top;
		margin-left: 20rpx;
		font-size: 30rpx;
		color: var(--titleColor);
	}

	.user-button {
		position: absolute;
		right: 20rpx;
		top: 20rpx;
		font-size: 26rpx;
		border-radius: 99px;
		width: 70rpx;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		color: white;
		font-size: 30rpx;
		font-weight: bold;
	}

	.hei-view {
		padding-bottom: 0px;
		border-radius: 20px;
		background-color: white;
		overflow: hidden;
		margin-bottom: 20rpx;
	}

	.hei-user-view {
		height: 50rpx;
		line-height: 50rpx;
		border-bottom: 1px solid $u-info-light;
		padding: 20rpx;
		padding-bottom: 10rpx;
		transition: ease-out all .2s;
	}

	.hei-user-view:active {
		background-color: $u-info-light;
	}

	.hei-avatar {
		width: 50rpx;
		height: 50rpx;
		border-radius: 99px;
	}

	.hei-username {
		vertical-align: top;
		margin-left: 20rpx;
		font-size: 28rpx;
	}

	.hei-content-view {
		padding: 20rpx;
		padding-bottom: 10rpx;
		transition: ease-out all .2s;
	}

	.hei-content-view:active {
		background-color: $u-info-light;
	}

	.hei-image {
		width: 210rpx;
		height: 210rpx;
		border-radius: 20px;
	}

	.hei-info {
		display: inline-block;
		vertical-align: top;
		margin-left: 20rpx;
		width: 65.8%;
		overflow: hidden;
	}

	.hei-title {
		color: var(--titleColor);
		font-size: 32rpx;
	}

	.hei-content {
		color: var(--contentColor);
		font-size: 26rpx;
		margin-top: 10rpx;
		display: -webkit-box;
		-webkit-line-clamp: 4;
		-webkit-box-orient: vertical;
	}

	.hei-button-view {
		height: 80rpx;
		line-height: 80rpx;
		padding-left: 20rpx;
		border-top: 1px solid $u-info-light;
		position: relative;
	}

	.hei-likes {
		color: var(--secColor);
		font-size: 24rpx;
	}

	.hei-collects {
		color: var(--secColor);
		font-size: 24rpx;
		margin-left: 20rpx;
	}

	.hei-button-group {
		position: absolute;
		right: 0px;
		bottom: 0px;
		text-align: center;
		font-size: 40rpx;
		overflow: hidden;
	}

	.hei-button-like {
		display: inline-block;
		background-color: $u-info-light;
		width: 180rpx;
	}

	.hei-button-collect {
		display: inline-block;
		background-color: $u-info-light;
		width: 180rpx;
	}
	
	.collect {
		background-color: $u-warning;
		color: white;
	}
	
	.like {
		background-color: $u-error;
		color: white;
	}
</style>
